<template>
	<view>
	
		
			<view class="header">
			    <view class="justify-between headerSearch align-center">
			    <view class="city align-center" @click="open" v-if="areaList.length">
			        {{ areaList[areaFocus].name}}<uv-icon name="arrow-down-fill" size="8" color="rgba(68, 68, 68, 1)"></uv-icon>
			       </view>
			       <text class="mlr10 line"></text>
			        <input type="text" v-model="keyword" class="flex1" placeholder="请输入关键词搜索" />
			        <uv-icon @click="search" color="#000" size="28" name="search"></uv-icon>
			    </view>
			</view>
			
			<view class="plr15">
			<view class=" justify-between flex-wrap ">
				<view class="peopleInfo bgWhite pb10" style="background-color: #fff;" v-for="(item,index) in gyList " :key="index" @click="toMain(item)">
					<image style="width: 336rpx;height: 262rpx;border-radius: 15rpx 15rpx 0 0 ;" :src="item.image"
						mode=""></image>
				
					<view class=" flex-col bgWhite mlr10  mt12 justify-between ">
						<view class="clamp2 " style="font-weight: bold;font-size: 26rpx;color: #333;">
							 {{item.title}}
						</view>
						<view class="align-center dataPrice mt12 mb10">
									￥{{item.price}} <text class="linePirce">￥{{item.original_price}}</text>
						</view>
						<view class="align-center">
						<image style="width: 28rpx;margin-right: 10rpx;" src="/static/images/middle/i11.png" mode="widthFix"></image>	{{item.name}}
						</view>
					</view>
				</view>
			</view>
            <view class="" v-if="gyList.length==0">
            	<uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
            </view>
		</view>
			<uv-picker ref="picker" :columns="[areaList]"  keyName="name" @confirm="confirm"></uv-picker>
			
		<customtab :value="1" ></customtab>
	</view>
</template>

<script>
	import customtab from '@/components/customTab.vue'
	export default {
	    components: {
	        customtab
	    },
		data() {
			return {
				gyList: [
				],
				yhList: [],
				orderList: [],
				page:1,
				keyword:"",
				area_id:"",
				areaList:[],
				areaFocus:0
			}
		},
		onLoad() {
			// this.getIndex()
			// this.getOrder()
			// this.getAreaList()
			// this.getCate()
			this.getArea()
			
			
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			async getArea(){
			let arealist = await  this.$api.getArea()
			console.log(arealist)
			this.areaList =arealist.data
			
			this.getList()
			},
			confirm(e){
			  console.log(e)  
			  this.areaFocus=e.indexs[0]
			  this.gyList=[]
			  this.page=1
			  this.getList()
			},
			open(){
			    this.$refs.picker.open()
			},
			search(){
				this.page=1;
                this.gyList=[]
				this.getList()
			},
			click(e) {
				console.log(e)
			},
			toUserList() {
				uni.navigateTo({
					url: '/pages/artist/index'
				})
			},
			toAct() {
				uni.navigateTo({
					url: '/pages/activity/index'
				})
			},
			toBooking() {
				uni.switchTab({
					url: '/pages/tabbar/chat'
				})
			},
			toApply() {
				uni.navigateTo({
					url: '/pages/artApply/index'
				})
			},
			
			async getList() {
				const {
					list
				} = await this.$api.mallIndex({
					page:this.page,
					area_id: this.areaList[this.areaFocus].id,
					keyword:this.keyword
				})
				
				this.gyList =[...this.gyList,...list]
			},
			async getList1() {
				const {
					data,
					code
				} = await this.$api.activityList({
					categoryId: 2
				})
				console.log(code, data)
				if (code == 200) {
					this.yhList = data
				}
			},
			async getList2() {
				const {
					data,
					code
				} = await this.$api.activityList({
					categoryId: 3
				})
				console.log(code, data)
				if (code == 200) {
					this.orderList = data
				}
			},

			toArticleMain(i) {
				uni.navigateTo({
					url: '/pages/article/index?id=' + i.id
				})
			},
			toMain(item) {
				uni.navigateTo({
					url: '/pages/equipmentMain/index?id=' + item.id
				})
			},
			toArtCate(index) {
				uni.navigateTo({
					url: '/pages/activity/index?index=' + index
				})
			},
			change(data) {
				uni.navigateTo({
					url: '/pages/addressMain/index?id=' + data
				})
			}
		},


	}
</script>
<style scoped lang="scss">
	.content {
		min-height: 100vh;
		position: relative;
		z-index: 99;
	}

	
</style>
<style scoped lang="scss">
	.title {
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
	}
	.dataPrice{
		font-weight: 500;
		font-size: 28rpx;
		color: #FF4345;
		.linePirce{
			font-weight: 400;
			font-size: 18rpx;
			color: #A9A9A9;
			text-decoration: line-through;
			margin-left: 10rpx;
		}
	}
		
	.peopleInfo{
		font-weight: 400;
		font-size: 18rpx;
		color: #888888;
	}
	
</style>